{extend name="property/public/insidePageBase" /}
{block name="title"}添加智能电表{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">物业筛选</label>
                        <div class="layui-input-block">
                            <select name="property_id" lay-filter="property_id" lay-search>
                                <option value="">-请选择-</option>
                                {foreach $propertyData as $k=>$v}
                                <option value="{$v['id']}">{$v['name']}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">收费方案</label>
                        <div class="layui-input-block" id="meter_plan_show">
                            <input type="text" name="plan_id" disabled placeholder="请筛选物业" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label indispensable">表计类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="wit_type" lay-filter="wit-type" autocomplete="off" value="1" title="智能表" checked>
                            <input type="radio" name="wit_type" lay-filter="wit-type" autocomplete="off" value="2" title="普通表">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">缴费类型</label>
                        <div class="layui-input-block">
                            <select name="plan_type" lay-filter="plan_type" lay-search>
                                <option value="">--请选择--</option>
                                <option value="1">后付费【先用后付费】</option>
                                <option value="2">系统预付费【先存后使用】4G/NB表</option>
                                <option value="3">离线预付费【先存后使用】蓝牙表</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">设备类型</label>
                        <div class="layui-input-block">
                            <select name="energy_type" lay-filter="energy_type" lay-search>
                                <option value="">--请选择--</option>
                                <option value="11">电表</option>
                                <option value="12">冷水表</option>
                                <option value="13">热水表</option>
                                <option value="14">燃气表</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">设备编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="energy_no" lay-verify="require" autocomplete="off" placeholder="请输入电表编号" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="layui-form-item">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix indispensable">&nbsp;&nbsp;&nbsp;&nbsp;计量倍率</div>
                            <input type="text" name="beilv" value="1" autocomplete="off" class="layui-input" placeholder="请输入计量倍率"  oninput="value=value.replace(/[^\d]/g,'');">
                            <div class="layui-input-split layui-input-suffix"> 倍</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">安装属性</label>
                        <div class="layui-input-block">
                            <select name="is_public" lay-filter="is_public" lay-search>
                                <option value="">--请选择--</option>
                                <option value="1" selected>公共设备</option>
                                <option value="2">分支设备</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs8">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">安装地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="energy_name" lay-verify="require" autocomplete="off" placeholder="请输入设备安装地址" class="layui-input">
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-row">
                <div class="layui-col-xs4">
                    <div class="layui-form-item">
                        <label class="layui-form-label indispensable">固定计量价</label>
                        <div class="layui-input-block">
                            <input type="text" name="unit_price"  lay-verify="require" autocomplete="off" placeholder="请输入设备计量单价" class="layui-input" oninput="value=value.replace(/[^\d.]/g,'');">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">通断方式
                            <i class="layui-icon layui-icon-question hoverTips"  lay-text="
                                    不设置表示实时通断。例：设置 9，表示每天9点检测一次，符合断开条件: 设备余额小于0、账单逾期支付">
                            </i>
                        </label>
                        <div class="layui-input-block">
                            <input type="radio" name="off_type" lay-filter="off_type" value="1" title="手动" checked>
                            <input type="radio" name="off_type" lay-filter="off_type" value="2" title="自动">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs3" id="off_box" style="display: none;">
                    <div class="layui-input-group">
                        <select name="off_time" lay-search>
                            <option value="">--请选择--</option>
                            {for start="0" end="24"}
                            <option value="{$i}" {if $i == 8}selected{/if}>{$i}:00</option>
                            {/for}
                        </select>
                        <div class="layui-input-split layui-input-suffix">断电</div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark"></textarea>
                </div>
            </div>



            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>

<script id="meter_plan_tpl" type="text/html">
    <select name="plan_id" lay-filter="plan_id" id="plan_id">
        <option value="">请选择</option>
        {{# layui.each(d.planList, function(index, elem) { }}
        <option value="{{elem.id}}">{{elem.plan_name}}</option>
        {{# }) }}
    </select>
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer','laytpl'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,laytpl = layui.laytpl;
        form.on('select(property_id)', function(res) {
            let value = res.value
            loadPropertyPlan(value)
        })
        form.on('radio(off_type)', function(elem) {
            if(elem.value == 2) {
                $('#off_box').show()
            } else {
                $('#off_box').hide()
            }
        })
        function loadPropertyPlan(propertyId) {
            $.get('{:request()->url()}', {property_id:propertyId,get_type:'planData'}, function(res) {
                if(res.code == 0) {
                    var getTpl = document.getElementById('meter_plan_tpl').innerHTML; // 获取模板字符
                    var elemView = document.getElementById('meter_plan_show'); // 视图对象
                    laytpl(getTpl).render({planList:res.data}, function(str){
                        elemView.innerHTML = str;
                        form.render('select')
                    });
                }

            })
        }
    });
</script>
{/block}